<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绑定样式</title>
  <script src="../js/vue.js"></script>
  <style>
      .basic{
         background-color: blueviolet
      }
      .normal{
         background-color: aqua;
      }
      .happy{
         background-color: gold;
      }
      .sad{
         background-color: gray;
      }
      .zhoujie1{
         border-color: greenyellow;
      }
      .zhoujie2{
        border-color: goldenrod;
      }
      .zhoujie3{
        border-color: blanchedalmond;
      }
  </style>
</head>
<body>
  <div id="root">
      <!-- (1) 对于class绑定：字符串形式，不变的可以还写class，变得可以用属性绑定，最后会一起汇总的
      -->
      <button class="basic" :class="mood" @click="changeMood">{{name}}</button>
       
      <!-- (2) 对于class绑定：数组形式，一般用于类样式个数暂不确定，后期通过arr.shift、arr.push动态处理
               其实就是变量和数组的区别
      -->
      <button class="basic" :class="arr">{{name}}</button>

      <!-- (3) 对于class绑定：对象形式，用于类样式、个数都确定，但是决定用不用
               也就是说 数组既然可以让个数不确定，那么对象就是决定哪些属性使用，哪些属性不使用
               充分利用的键值对的特点
      -->
      <button class="basic" :class="classArr">{{name}}</button>

      <!-- (4) 对于style绑定：一般是对象形式 -->
      <button class="basic" :style="styleObj">{{name}}</button>

      <!-- (5) 对于style绑定：数组形式，每个元素必须要是样式对象 -->
      <button class="basic" :style="styleArr">{{name}}</button>

    </div>
   <script type='text/javascript'>
       const vm = new Vue({
           el:'#root',
           data:{
             name:'zhoujie',
             mood:'normal',
             arr:['zhoujie1','zhoujie2','zhoujie3'],
             classArr:{
                // (4) 这里的属性之所以可以写zhoujie123，是因为上面style中有
                zhoujie1:true,
                zhoujie2:false,
                zhoujie3:false
             },
             styleObj:{
                fontSize:'40px',
                color:'red'
             },
             styleArr:[
                {
                   fontSize:'60px',
                },
                {
                   color:'blue'
                }
             ]
           },
           methods: {
             changeMood(){
                const arr = ['normal','sad','happy']
                /**
                 * (2)随机生成0-3的任意数的写法
                 *    Math.random()默认是0-1中的任意数，*3就为0-3之间
                 *    再向下取整就变成整数了  
                 * */ 
                this.mood = arr[(Math.floor(Math.random()*3))]
            }
           },
       })
   </script>
</body>
</html>